<template>
  <div>
<!--    <a-table
        :locale="{emptyText:'暂无数据可选，请选创建用户！'}"
        :columns="columns"
        :data-source="dataList"
        size="small">
      <template #action="{ record }">
      <span>
        <a @click="toLogin(record)">选择</a>
      </span>
      </template>
    </a-table>-->
    <a-table :dataSource="dataList" :columns="columns" >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'action'">
        <span>
        <a @click="toLogin(record)">选择</a>
        </span>
        </template>
      </template>
    </a-table>
    <a-button type="dashed" block key="buy" @click="toAddUserPage"><PlusOutlined />创建用户</a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { PersonModel } from '@/views/person/js/person-model';
import { PersonApi } from '@/views/person/js/person-api';
import { ResultModel } from '@/common/result.model';
import { TeamModel } from '@/views/team/js/team-model';
import $store from '@/store/index'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'age'
  },
  {
    title: '所属班组',
    dataIndex: 'teamName',
    key: 'teamName'
  },
  {
    title: '选择',
    dataIndex: 'teamName',
    key: 'action'
  }
]
export default defineComponent({
  name: 'login-user-table',
  methods: {
    toLogin (person: PersonModel) {
      $store.commit('updateLoginUser', person)
    },
    toAddUserPage () {
      this.$router.push('/person/person/form')
    }
  },
  setup () {
    const dataList = ref([])
    const pageQuery = (name = '') => {
      PersonApi.query(1, 10, name).then((response: ResultModel) => {
        console.log(response);
        if (ResultModel.isSuccessPageInfo(response)) {
          // eslint-disable-next-line no-return-assign
          response.data && response.data.dataList && response.data.dataList.forEach((item: TeamModel) => item.key = item.id)
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          dataList.value = response.data.dataList
        }
      })
    }
    pageQuery()
    return {
      pageQuery,
      dataList,
      columns
    }
  }
})
</script>

<style scoped lang="less">

</style>
